<template>
  <div>
    <div
      class="item-parent"
      v-for="(item,index) in shapesList"
      :key="index"
      @click="onShapeClick(index)"
    >

      <div v-if="item.divider" style="height:5px; width:100%;  background-color: darkgray;"/>

      <el-tooltip :content="item.tip" placement="right" effect="dark">
        <el-image
          :class="selectedShapeId != index ?  'item-img' : 'item-img-selected' "
          :src="item.src"
          fit="cover"
        ></el-image>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      selectedShapeId: 0,
      shapesList: [
        {
          src: require("@/assets/img/shapes/select.png"),
          type: 0,
          tip: "选取",
        },
        { src: require("@/assets/img/shapes/line.png"), type: 1, tip: "直线" },
        {
          src: require("@/assets/img/shapes/polyline.png"),
          type: 2,
          tip: "多段线",
        },
        {
          src: require("@/assets/img/shapes/polygon.png"),
          type: 3,
          tip: "多边形",
        },
        { src: require("@/assets/img/shapes/rect.png"), type: 4, tip: "矩形" },
        {
          src: require("@/assets/img/shapes/rect-fill.png"),
          type: 5,
          tip: "填充矩形",
        },
        {
          src: require("@/assets/img/shapes/ellipse.png"),
          type: 6,
          tip: "椭圆",
        },
        { src: require("@/assets/img/shapes/arc.png"), type: 7, tip: "圆弧" },
        { src: require("@/assets/img/shapes/pen.png"), type: 8, tip: "手绘" },
        { src: require("@/assets/img/shapes/cloud.png"), type: 9, tip: "云" },
        { src: require("@/assets/img/shapes/text.png"), type: 10, tip: "文字" },
        { src: require("@/assets/img/shapes/mark.png"), type: 11, tip: "标记" },

        {
          src: require("@/assets/img/shapes/circle_mark.png"),
          type: 12,
          tip: "圆标",
          divider: true,
        },
        {
          src: require("@/assets/img/shapes/rect_mark.png"),
          type: 13,
          tip: "方标",
        },
        {
          src: require("@/assets/img/shapes/triangle_mark.png"),
          type: 14,
          tip: "三角标",
        },
        {
          src: require("@/assets/img/shapes/diamond_mark.png"),
          type: 15,
          tip: "菱标",
        },
      ],
    };
  },
  methods: {
    onShapeClick(e) {
      console.log(e);
      this.selectedShapeId = e;

      this.$emit("handleSelectChange", {
        selectedShapeId: this.selectedShapeId,
      });
    },
  },
};
</script>

<style>
.item-img {
  padding: 10px;
  width: 25px;
  height: 25px;
  background-color: transparent;
}

.item-img-selected {
  padding: 10px;
  width: 25px;
  height: 25px;
  background-color: darkgray;
}

.item-parent {
  display: flex;
  flex-direction: column;
}
</style>